<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<style type="text/css">
			body,
			html,
			#container {
				height: 100%;
				margin: 0px;
				font: 12px Arial;
				background: red;
			}
			
			.circle {
				border-radius: 50%;
				border: solid 1px silver;
				width: 50px;
				height: 50px;
				padding: 3px;
				text-align: center;
				line-height: 25px;
				max-width: 50px;
				color: #fff;
			}
			
			.showtitle {
				background: #393;
				width: 150px;
				height: 30px;
				line-height: 30px;
				color: #fff;
				border-radius: 5px;
				padding-left: 5px;
			}
			
			.showtitle i {
				font-size: 16px;
			}
			
			.showcontent {
				background: #62ab00;
				width: 300px;
				font-size: 12px;
				margin-left: -80px;
				border-radius: 5px;
				color: #fff;
				position: absolute;
				display: none;
				bottom: 30px;
				z-index: 99;
			}
			
			.showcontent .p {
				line-height: 30px;
				padding-left: 10px;
				margin-top: -0px;
			}
			
			.showcontent i.triangle_i {
				color: #62ab00;
				font-size: 25px;
				display: block;
				width: 100%;
				background: #fff;
				text-align: center;
				height: 25px;
			}
			
			.showcontent i.close_i {
				position: absolute;
				right: 5px;
				top: 5px;
				font-size: 25px;
				z-index: 99999;
			}
			.amap-labels{
				/*background: #123a51;*/
			}
		</style>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
		<title>高德地图Marker实现聚合效果</title>
	</head>

	<body>
		<div id="container" tabindex="0"></div>
		<div id="tip">可以缩放地图，得到缩放级别哦！<br><span id="info"></span></div>
		<script src="./marker.js"></script>
		<script src="https://webapi.amap.com/maps?v=1.4.1&key=de46cac2667f7b246a14192b88ba619d"></script>
		<script type="text/javascript">
			$(function() {
				//弹出框关闭
				$('.showtitle').live('click', function() {
					$(this).prev('.showcontent').toggle();
				})
				$('.close_i').live('click', function() {
					$(this).parent().hide();
				})
			})
			//初始化地图容器
			var map = new AMap.Map('container', {
				resizeEnable: true,
				zoom: 5,
				zooms: [6, 18],
				//center: [106.49, 34.60]
				center: [106.7072200000,26.5982000000]
			});

			//设置地图比例尺
			AMap.plugin(['AMap.Scale'],
				function() {
					map.addControl(new AMap.Scale());
				});

			//添加监听时间，当前缩放级别
			AMap.event.addListener(map, 'zoomend', function() {
				document.getElementById('info').innerHTML = '当前缩放级别：' + map.getZoom();
			});

			var markersTwo;
			var markersThree;
			var createMarker = function(data, hide) {
				var div = document.createElement('div');
				div.className = 'circle';
				var r = Math.floor(data.count / 1024);
				div.style.backgroundColor = hide ? '#393' : '#09f';
				var htmlData = '<div>' + data.name + '</div><div>' + data.count + '</div>';
				div.innerHTML = htmlData;

				var marker = new AMap.Marker({
					content: div,
					title: data.name,
					position: data.center.split(','),
					offset: new AMap.Pixel(-24, 5),
					zIndex: data.count,
				});
				marker.subMarkers = [];
				if(data.name === '山东省' || data.name === '河南省' || data.name === '济南市' || data.name === '天桥区') {
					marker.setLabel({
						content: '&larr;请点击',
						offset: new AMap.Pixel(45, 0)
					})
					map.setCenter(marker.getPosition());
				}
				if(!hide) {
					marker.setMap(map)
				}
				if(data.subDistricts && data.subDistricts.length) {
					for(var i = 0; i < data.subDistricts.length; i += 1) {
						marker.subMarkers.push(createMarker(data.subDistricts[i], true));
					}
				}
				return marker;
			}

			var _onZoomEnd = function(e) {
				if(map.getZoom() < 7) { //全国下的省份
					for(var i = 0; i < markers.length; i += 1) {
						map.remove(markers[i].subMarkers);
					}
					map.add(markers);
				} else if((map.getZoom() < 9) && (map.getZoom() > 7)) { //省份下的市
					for(var i = 0; i < markersTwo.length; i += 1) {
						map.remove(markersTwo[i].subMarkers);
					}
					map.add(markersTwo);
				} else if(map.getZoom() < 14 && map.getZoom() > 9) { //市下面的区或县
					for(var i = 0; i < markersThree.length; i += 1) {
						map.remove(markersThree[i].subMarkers);
					}
					map.add(markersThree);
				}
			}
			var _onClick = function(e) {
				if(e.target.subMarkers.length) {

					map.add(e.target.subMarkers);
					map.setFitView(e.target.subMarkers);
					markersTwo = e.target.subMarkers;

					var subMarkersTwo = e.target.subMarkers;
					for(var j = 0; j < subMarkersTwo.length; j += 1) {
						AMap.event.addListener(subMarkersTwo[j], 'click', _onClickTwo);
						AMap.event.addListener(subMarkersTwo[j], 'mouseover', _onMouseoverTwo);
						AMap.event.addListener(subMarkersTwo[j], 'mouseout', _onMouseoutTwo);
					}
					map.remove(markers)
				}
			}

			var _onMouseover = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#393';
				e.target.setContent(div);
				console.log(e," eee:");
			}
			var _onMouseout = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#09f';
				e.target.setContent(div);
			}

			var _onClickTwo = function(e) {

				if(e.target.subMarkers.length) {

					map.add(e.target.subMarkers);
					map.setFitView(e.target.subMarkers);
					map.setZoom(11);

					markersThree = e.target.subMarkers;

					var subMarkersThree = e.target.subMarkers;
					for(var j = 0; j < subMarkersThree.length; j += 1) {

						AMap.event.addListener(subMarkersThree[j], 'click', _onClickThree);
						AMap.event.addListener(subMarkersThree[j], 'mouseover', _onMouseoverThree);
						AMap.event.addListener(subMarkersThree[j], 'mouseout', _onMouseoutThree);

					}

					map.remove(markersTwo)

				}

			}

			var _onMouseoverTwo = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#09f';
				e.target.setContent(div);
			}

			var _onMouseoutTwo = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#393';
				e.target.setContent(div);
			}

			var _onClickThree = function(e) {

				if(e.target.subMarkers.length) {
					map.add(e.target.subMarkers);
					map.setFitView(e.target.subMarkers);
					var subMarkersFour = e.target.subMarkers;
					for(var j = 0; j < subMarkersFour.length; j += 1) {
						var title = e.target.subMarkers[j].getTitle();
						var html = '<div class="showcontent"><div class="p">公司名称：' + title + '</div><div class="p">联系方式：' + title + '</div><i class="fa triangle_i">&#xf0d7</i><i class="fa close_i">&#xf057</i></div><div class="showtitle"><i  class="fa">&#xf1ba</i>&nbsp;&nbsp;' + title + '</div>';
						e.target.subMarkers[j].setContent(html);
					}
					map.remove(markersThree)
				}

			}

			var _onMouseoverThree = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#09f';
				e.target.setContent(div);
			}
			var _onMouseoutThree = function(e) {
				var div = e.target.getContent();
				div.style.backgroundColor = '#393';
				e.target.setContent(div);
			}

			var markers = []; //province见Demo引用的JS文件
			for(var i = 0; i < provinces.length; i += 1) {
				var marker = createMarker(provinces[i]);

				markers.push(marker);

				AMap.event.addListener(marker, 'click', _onClick);
				AMap.event.addListener(marker, 'mouseover', _onMouseover);
				AMap.event.addListener(marker, 'mouseout', _onMouseout);
			}
			map.setFitView();
			AMap.event.addListener(map, 'zoomend', _onZoomEnd);
		</script>
		<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
	</body>

</html>